<template>
  <!-- 分类列表 -->
  <Category
    :subjects="subjects"
    :subjectActiveId="subjectActiveId"
    :subjectActivePid="subjectActivePid"
    @changeSubjectActiveId="changeSubjectActiveId"
    @changeSubjectActivePid="changeSubjectActivePid"
  />
  <div class="w w-card">
    <!-- 标题 -->
    <div class="title">
      <h1>全部课程</h1>
      <div class="title-desc">
        共找到
        <em class="title-count">{{ total }}</em>
        个结果
      </div>
    </div>
    <!-- 无数据 -->
    <div v-if="total == 0" class="w-100%">
      <svg-icon
        name="sour_face"
        class="svg"
        width="150px"
        height="150px"
      ></svg-icon>
      <span class="f-c-c mt-5 color-#909399">暂无课程，请稍后再试~</span>
    </div>
    <!-- 课程列表 -->
    <div class="course-list" v-else>
      <div
        class="course-item"
        v-for="course in courseList"
        :key="course.courseId"
      >
        <router-link :to="`/course/${course.courseId}`">
          <div class="course-item-img">
            <img :src="course.coverUrl" alt="课程封面" />
          </div>
          <div class="course-item-content">
            <h3>{{ course.title }}</h3>
            <div class="course-item-content-footer">
              <span class="footer-price-free" v-if="course.price == 0">
                免费
              </span>
              <span class="footer-price-pay" v-else>￥{{ course.price }}</span>
              <span class="footer-study">总共{{ course.lessonNum }}课时</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        v-show="total > 0"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqSubjectTree } from '@/api/subject'
import Category from './category/index.vue'
import type { SubjectTree } from '@/api/subject/type'
import { reqV2PageCourse } from '@/api/course'
import { Course } from '@/api/course/type'

let subjects = ref<SubjectTree[]>([])
let courseList = ref<Course[]>([])
let total = ref<number>(0)
let pageNum = ref<number>(1)
let pageSize = ref<number>(12)
let route = useRoute()
let subjectActiveId = ref<string>('')
let subjectActivePid = ref<string>('-1')
let keyword = ref<string>('')

const changeSubjectActiveId = (subjectId: string) => {
  subjectActiveId.value = subjectId
  getCourseList()
}
const changeSubjectActivePid = (pid: string) => {
  subjectActivePid.value = pid
  //清空分类
  subjectActiveId.value = ''
  getCourseList()
}

const getSubjects = async () => {
  let { data } = await reqSubjectTree()
  subjects.value = data
}

const getCourseList = async () => {
  let result = await reqV2PageCourse(pageNum.value, pageSize.value, {
    subjectId: subjectActiveId.value,
    subjectPid:
      subjectActivePid.value == '-1' ? undefined : subjectActivePid.value,
    title: keyword.value,
  })
  courseList.value = result.rows
  total.value = result.total
  // console.log(result.rows)
}

/* 其他页面点击进来 */
watchEffect(async () => {
  if (route.query.pid) {
    subjectActivePid.value = route.query.pid as string
    if (route.query.subjectId) {
      subjectActiveId.value = route.query.subjectId as string
    }
  }
  if (route.query.keyword) {
    keyword.value = route.query.keyword as string
  }
  await getCourseList()
})

onMounted(() => {
  getSubjects()
  getCourseList()
})
</script>

<style lang="scss" scoped>
/* 分页头 */
.title {
  height: 24px;
  padding: 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  h1 {
    font-size: 16px;
    font-weight: 600;
  }
  .title-desc {
    font-size: 16px;
    .title-count {
      font-weight: 600;
      color: #14171a;
      font-style: normal;
    }
  }
}
/* 课程列表 */
.course-list {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  .course-item {
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 80, 179, 0.08);
    transition: all 0.2s linear;
    &:hover {
      color: #2080f7;
      box-shadow: 0 8px 30px rgba(0, 80, 179, 0.12);
    }
    .course-item-img {
      overflow: hidden;
      border-radius: 8px;
      img {
        width: 100%;
        border-radius: 8px;
        transition: all 0.2s linear;
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    .course-item-content {
      flex-direction: column;
      display: flex;
      justify-content: space-between;
      padding: 8px 12px 16px 12px;
      h3 {
        margin: 0 0;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .course-item-content-footer {
        margin-top: 10px;
        font-size: 16px;
        line-height: 19px;
        .footer-price-free {
          margin-right: 6px;
          color: #463f3c;
        }
        .footer-price-pay {
          margin-right: 6px;
          color: red;
        }
        .footer-study {
          font-size: 14px;
          line-height: 20px;
          color: #a1a9b2;
        }
      }
    }
  }
}
.pagination {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
</style>
